<template>
<!-- 暂弃 -->
<div style="border: 1px solid;
    height: 100%;
    width: 100%;background: url('../assets/img/loginBackground.png');">
 <div class="ts"></div> 
  <div class="loginForm">
    <el-form
      :model="loginForm"
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="userName">
        <el-input v-model="loginForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="userPass">
        <el-input type="password" v-model="loginForm.userPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getLogin('loginForm')">登录</el-button>
        <!-- <el-button type="primary" @click="submitForm('loginForm')">提交</el-button> -->
        <el-button @click="register()">注册</el-button>
      </el-form-item>
    </el-form>
    <!-- <div class="group">
      <input type="text" placeholder="请输入账号" v-model="userName" />
    </div>
    <div class="group">
      <input type="text" placeholder="请输入密码" v-model="userPwd" />
    </div>
    <div class="group">
      <button type="button" @click="getLogin">登录</button>
    </div> -->
  </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      loginForm: {
        userName: "",
        userPass:""
      },
       
      rules: {
          userName: [
            { required: true, message: '请输入账户名称', trigger: 'blur' }
          ],
          userPass: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          //  pass: [
          //   { validator:pass, trigger: 'blur' },
          // ],
        },
    };
  },
  methods: {
    getLogin(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
              axios({
          methods:'GET',
           params:{
                  user:this.loginForm.userName,//属性名：账号
                  pwd:this.loginForm.userPass
              },
          url:'http://127.0.0.1:3000/login/loginUser'
        })
        .then(res=>{
          if(res.data.code==200){
                   this.$router.push('/home/barter');
                   window.sessionStorage.setItem("userName",this.loginForm.userName);
               }else{
                    alert('账号或密码有问题');
                    this.loginForm.userName='';
                    this.loginForm.userPass = "";
               }
        })
        .catch(err=>{
          console.log(err);
        })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      // console.log(this.loginForm);
      // if (this.loginForm.userName != "" && this.loginForm.userPass != "" ) {
      //   // window.sessionStorage.setItem("userName",this.loginForm.userName);
      //   axios({
      //     methods:'GET',
      //      params:{
      //             user:this.loginForm.userName,//属性名：账号
      //             pwd:this.loginForm.userPass
      //         },
      //     url:'http://127.0.0.1:3000/login/loginUser'
      //   })
      //   .then(res=>{
      //     if(res.data.code==200){
      //              this.$router.push('/home/barter');
      //              window.sessionStorage.setItem("userName",this.loginForm.userName);
      //          }else{
      //               alert('有问题');
      //               this.loginForm.userName='';
      //               this.loginForm.userPass = "";
      //          }
      //   })
      //   .catch(err=>{
      //     console.log(err);
      //   })
      //   // this.$router.push("/home/barter");
      // }
      // 发起对后台的请求
      //       if(user!='12' && pwd!='12'){
      // axios({
      //          methods: "GET", //get-使用params传参，后端用query接收；获取数据
      //         // post使用data传参获取请求，后端用body接收,对数据进行修改
      //         params:{
      //             user:user,//属性名：账号
      //             pwd:pwd,
      //         },
      //         //会有跨域问题（浏览器的同源策略，无法运行其他网站的脚本，浏览器对js设置的安全性，无法避免）
      //         url: "http://127.0.0.1:3000/login/loginUser"
      //        })
      //         .then((res) => {//请求成功的处理
      //     //       console.log(res);
      //           if(res.data.code==200){
      //              this.$router.push('/home')
      //          }else if(res.data.code==400){
      //               alert('有问题');
      //               this.userName='';
      //               this.userPwd='';
      //          }
      //          })
      //        .catch((err) => {//错误的返回
      //          console.log(err);
      //        })
      //     }
    },
     register(){
       console.log("跳转到注册页面");
     },
     submitForm(formName) {
       console.log(formName);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  
};
</script>

<style scoped lang="css">
.loginForm {
  width: 400px;
  margin: 100px auto 0;
  box-shadow: 0 0 3px #ddd;
  background: #fff;
  padding: 20px 10px;
  position: fixed;
    /* right: 4%;
    top: 30%; */
    right: 32%;
    top: 28%;
    /* background: url("../assets/img/loginBackground.png"); */
    background-size: 400px;
}
.ts{
  height: 100%;
  width: 100%;
  background: url("../assets/img/loginBackground.png");
}

</style>